import { Card, Input, Button, message, Popconfirm } from "antd";
import React, { useState, useEffect } from "react";
import "./index.scss";
import api from "../../../../api";
const CategoryArticle = () => {
  const [flag, setFlag] = useState(false);
  const [tagList, setTagList] = useState([]);
  const [form, setForm] = useState({
    text: "",
    value: "",
  });
  useEffect(() => {
    init();
  }, []);
  const init = () => {
    getTagList();
  };
  const getTagList = async () => {
    const res = await api.getTagList();
    setTagList([...res.data]);
  };
  const changeFormValue = (value, type) => {
    form[type] = value;
    setForm({ ...form });
  };
  const handlerClassify = (item) => {
    setFlag(true);
    setForm({ ...item });
  };
  const resetForm = () => {
    setForm({
      text: "",
      value: "",
    });
  };
  //更新
  const updateTag = async () => {
    const res = await api.editTagList({ ...form });
    if (res.message) {
      init();
      message.success(res.message);
    } else {
      message.warning(res.data.message);
    }
  };
  //添加
  const addTag = async () => {
    if (form.text && form.value) {
      const res = await api.addTagList({ ...form });
      if (res.message) {
        init();
        message.success(res.message);
        setFlag(false);
        resetForm();
      } else {
        message.warning(res.data.message);
      }
    } else {
      message.warning("值不可为空");
    }
  };
  //删除
  const delTag = async () => {
    const res = await api.delTagList({ id: form.id });
    init();
    message.success(res.message);
    setFlag(false);
    resetForm();
  };
  return (
    <div className="classify-box">
      <Card title="添加标签" style={{ width: "35%" }}>
        <Input placeholder="输入标签名称" value={form.text} onChange={(e) => changeFormValue(e.target.value, "text")}></Input>
        <Input
          placeholder="输入标签值(请输入英文，作为路由使用)"
          value={form.value}
          onChange={(e) => changeFormValue(e.target.value, "value")}
        ></Input>
        <div className="handler-box">
          {flag ? (
            <div className="operating-btn-box">
              <div>
                <Button type="primary" onClick={updateTag}>
                  更新
                </Button>
                <Button
                  type="dashed"
                  onClick={() => {
                    setFlag(false);
                    resetForm();
                  }}
                >
                  返回添加
                </Button>
              </div>
              <div>
                <Popconfirm title="确认删除这个分类？" okText="确认" cancelText="取消" onConfirm={delTag}>
                  <Button danger>删除</Button>
                </Popconfirm>
              </div>
            </div>
          ) : (
            <Button type="primary" onClick={addTag}>
              保存
            </Button>
          )}
        </div>
      </Card>
      <Card className="right-card" title="所有标签" style={{ width: "55%", marginLeft: 20 }}>
        {tagList?.length &&
          tagList.map((item) => {
            return (
              <Button onClick={() => handlerClassify(item)} key={item.id}>
                {item.text}
              </Button>
            );
          })}
      </Card>
    </div>
  );
};

export default CategoryArticle;
